<template>
  <div class="passwordSetting">
    <n-form
      ref="formRef"
      :model="userForm"
      :rules="userRules"
      :label-width="120"
      label-placement="left"
      require-mark-placement="left"
    >
      <template v-for="(item,index) in getFormOptions" :key="index">
        <n-form-item :label="item.label" :path="item.key" v-bind="item?.prop">
          <n-input v-if="item.type === 'input'"
                   type="password"
                   v-model:value="userForm[item.key]"
                   show-password-on="mousedown"
                   v-bind="item.props" />
        </n-form-item>
      </template>
      <n-button type="info" class="changePass" @click="changePassword()">
        修改密码
      </n-button>
    </n-form>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { form } from '../tools/form'
import { editPassword } from '@/api/system/user'
const { formItem, userForm, userRules } = form
const formRef = ref()

const getFormOptions = computed(() => {
  return {
    ...formItem
  }
})
const changePassword = () => {
  formRef.value?.validate(async(errors) => {
    if (!errors) {
      const params = { ...userForm }
      const { data } = await editPassword(params)
      if (data.data) {
        $message.success('验证成功')
      }
    } else {
      console.log(errors)
      $message.error('验证失败')
    }
  })
}
</script>

<style scoped lang="scss">
.passwordSetting{
  margin-top: 20px;
  width: 500px;
  .changePass{
    width: 120px;
    margin: 0 auto;
    display: flex;
  }
}
</style>
